<template>
  <div class='user-list-h clearfix'>
    <!-- 用户头像 -->
    <div class="fl user-img-box">
      <div class='posi-rel' :title=profile.nickname
      @mouseenter='showChangeAvatarBtn(true)' @mouseleave='showChangeAvatarBtn(false)'>
        <img :src=profile.avatarUrl class='user-img'>
        <div class='posi-ab change-avatar-box t-a-c' v-show='showChangeAvatarFlag'>
          <a href="javascript:;" class='change-avatar'>更换头像</a>
        </div>
      </div>
    </div>
    <div class="fl ml30">
      <!-- 用户昵称 -->
      <div class="user-nickname-box clearfix">
        <span class="nickname fs20 fl">{{ profile.nickname }}</span>
        <span class="vip-icon disinblock"></span>
        <span class="lvl disinblock vertical-middle">{{ userList.level }}</span>
        <i class='disinblock right-lvl vertical-middle mr20'></i>
        <span class="sex-type disinblock  vertical-middle">
          <span class="disinblock woman" v-show='isWoman(profile.gender)'></span>
          <span class="disinblock man" v-show='!isWoman(profile.gender)'></span>
        </span>
        <el-button type="primary" round size="mini" class='fr'>编辑个人资料</el-button>
      </div>
      <!-- 动态、关注、粉丝 -->
      <ul class='user-dynamic-ul'>
        <li class='user-dynamic-li fl'>
          <a href="javascript:;">
            <strong class='disblock fs18'>{{ profile.eventCount }}</strong>
            <span>动态</span>
          </a>
        </li>
        <li class='user-dynamic-li fl'>
          <a href="javascript:;">
            <strong class='disblock fs18'>{{ profile.followeds }}</strong>
            <span>关注</span>
          </a>
        </li>
        <li class='user-dynamic-li fl'>
          <a href="javascript:;">
            <strong class='disblock fs18'>{{ profile.follows }}</strong>
            <span>粉丝</span>
          </a>
        </li>
      </ul>
      <!-- 个人介绍 -->
      <div class='fs12 fcgray mt20'>
        个人介绍:<span class='ml10'>{{ profile.signature }}</span>
      </div>
      <!-- 年龄 -->
      <div class='fs12 fcgray mt20'>
        年龄:<span class='ml10'>{{ profile.birthday | formatTime}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'userListHead',
    props: ['userData'],
    data() {
      return {
        userList: {},
        profile: {},
        showChangeAvatarFlag: false
      }
    },
    watch: {
      userData() {
        this.userList = this.userData
        this.profile = this.userData.profile
      }
    },
    methods: {
      showChangeAvatarBtn(flag) {
        this.showChangeAvatarFlag = flag
      },
      isWoman(gender) {
        if (gender == 1) {
          return false;
        } else {
          return true;
        }
      }
    }
}
</script>

<style lang='less' scoped>
  /deep/.el-button--primary {
    background-color: #ececec;
    border-color: #aaa9a9;
    color: black;
  }
  .user-list-h {
    width: 100%;
    height: 200px;
    .user-img-box {
      .user-img {
        padding: 3px;
        width: 180px;
        height: 180px;
        border: 1px solid #e1e1e1;
      }
      .change-avatar-box {
        width: 100%;
        height: 21px;
        background: #000;
        opacity: 0.6;
        bottom: 10px;
        .change-avatar {
          color: white;
        }
      }
    }
    .user-nickname-box {
      padding-bottom: 30px;
      border-bottom: 1px solid #e1e1e1;
      width: calc(1100px - 90px - 183px);
      .vip-icon {
        width: 30px;
        height: 19px;
      }
      .lvl {
        height: 19px;
        line-height: 21px;
        background: url('../../../assets/icon2.png');
        background-position: -132px -190px;
        overflow: hidden;
        padding-left: 33px;
        padding-right: 3px;
        color: #e03a24;
        font-size: 14px;
        font-weight: bold;
        font-style: italic;
      }
      .right-lvl {
        width: 9px;
        height: 19px;
        background: url('../../../assets/icon2.png');
        background-position: -191px -190px;
      }
      .woman, .man {
        width: 20px;
        height: 20px;
        background: url('../../../assets/icon.png');
      }
      .woman {
        background-position: -126px -26px;
      }
      .man {
        background-position: -126px -57px;
      }
    }
    .user-dynamic-ul {
      height: 42px;
      padding: 5px 0 5px 0;
      .user-dynamic-li {
        height: 42px;
        padding: 0 30px;
        border-right: 1px solid #e1e1e1;
        &:nth-of-type(1) {
          padding-left: 0;
        }
        &:nth-of-type(3) {
          border-right: none;
        }
        a {
          &:hover {
            text-decoration: none;
            color: #0c73c2;
          }
        }
      }
    }
    
  }
</style>